<template>
  <van-nav-bar title="修改地址" left-arrow @click="onClickLeft()" />
  <div class="hea">
    <!--是否为空-->
    <div v-if="addressData == undefined">
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="saveAddress"
        @delete="deleteAddress"
        @change-default="onChangeDetail"
      />
    </div>
    <div v-else>
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="saveAddress"
        @delete="deleteAddress"
        @update="updateAddress"
        @change-default="onChangeDetail"
        :address-info="{
          name: addressData.name,
          tel: addressData.tel,
          isDefault: addressData.isDefault,
          city: addressData.city,
          county: addressData.county,
          country: addressData.country,
          province: addressData.province,
          addressDetail: addressData.addressDetail
        }"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { showToast } from 'vant'
import { areaList } from '@vant/area-data'
const searchResult = ref([])
//修改地址
const updateAddress = async (id: any, addressInfo: any) => {
  try {
    // 修改地址接口调用代码在这里，例如使用axios进行HTTP请求等。
    const response = await axios.put(`/v1/address/${id}`, addressInfo)
    console.log(response.data)
    // 修改成功后，执行其他操作（例如返回上一页）
    router.go(-1)
    // 显示修改成功的提示信息
    showToast({
      // 提示信息内容
      message: '修改成功',
      // 提示信息显示时间（毫秒）
      duration: 1000
    })
  } catch (error) {
    console.error(error)
  }
}
//删除地址
const deleteAddress = async (id: any) => {
  try {
    // 删除地址接口调用代码在这里，例如使用axios进行HTTP请求等。
    const response = await axios.delete(`/v1/address/${id}`)
    console.log(response.data)
    // 删除成功后，执行其他操作（例如返回上一页）
    router.go(-1)
    // 显示删除成功的提示信息
    showToast({
      // 提示信息内容
      message: '删除成功',
      // 提示信息显示时间（毫秒）
      duration: 1000
    })
  } catch (error) {
    // 处理删除地址时发生的错误
    console.error(error)
  }
}
// 修改默认地址
// 省市县都选择时，显示搜索结果列表 否则显示省市县列表 或者 省市列表 或者 省列表 或者 空列表
const onChangeDetail = (val: any) => {
  if (val.province && val.city && val.county) {
    searchResult.value = []
  } else if (!val.province || !val.city || !val.country) {
    searchResult.value = areaList
  } else {
    searchResult.value = areaList.filter((item: any) => item.name.indexOf(val.country) > -1)
  }
  console.log(val)
}
//返回
const onClickLeft = () => {
  router.go(-1)
}
</script>
<style>
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.back-icon {
  padding: 10px;
  cursor: pointer;
}
.title {
  text-align: center;
}
.van-button--primary {
  background: greenyellow !important;
  color: white !important;
  border: none;
}
.van-button--default {
  background: greenyellow !important;
  color: white !important;
  border: none;
}
.van-button__text {
  color: white !important;
}
</style>
